import React, { Component } from "react";
import { StyleSheet, View, Text, FlatList } from "react-native";

import { connect } from "react-redux";
import HeaderDefault from "../../components/header/HeaderDefault";
import { theme_app, theme_text } from "../../utils/appTheme";
import DispensePatientCell from "./DispensePatientCell";
import { Empty } from "../../components/Empty/Empty";
import { getTodayFinishMatchTask } from "../../netServer/dispense";
import { birthdayToAges } from "../../utils/utils_date";

class Dispense extends Component {
  constructor(props) {
    super(props);
    this.state = {
      taskList: [],
      isFresh: false
    };
  }
  static navigationOptions = ({ navigation }) => ({
    header: <HeaderDefault backBtnOnPress={navigation.goBack} title="配药" />
  });

  _renderItem = ({ item }) => {
    let { status, main_task_id, patientInfo = {} } = item;
    let { name, grade_name, bed_no, allergy, birthday, sex } = patientInfo;
    return (
      <DispensePatientCell
        id={main_task_id}
        stateStr={status}
        sex={sexIndexToSexString(sex)}
        age={birthdayToAges(birthday)}
        name={name}
        allergy={allergy}
        bed={bed_no}
        nurseLevel={grade_name}
      />
    );
  };

  _keyExtractor = (item, index) => "peiyao" + index;

  _separator = () => {
    return <View style={{ height: 1, backgroundColor: "#efefef" }} />;
  };

  _ListEmptyComponent = () => {
    return <Empty titleStr="暂时没有相关的数据" />;
  };

  componentDidMount() {
    this._loadTodayLineTask();
  }

  _refreshData = () => {
    this.setState({
      isFresh: true
    });
    this._loadTodayLineTask();
  };

  _loadTodayLineTask = () => {
    let { user_id } = this.props.user_info;
    let params = new FormData();
    params.append("userId", user_id);

    //

    getTodayFinishMatchTask(params, resp => {
      let { code, data = [], msg } = resp;

      if (code == 0) {
        this.setState({
          taskList: data,
          isFresh: false
        });
      } else {
        this.setState({
          isFresh: false
        });
      }
    });
  };

  render() {
    return (
      <View style={styles.container}>
        {/* <View style={{ flex: 1 }} /> */}

        <FlatList
          style={{ flex: 1 }}
          refreshing={this.state.isFresh}
          onRefresh={this._refreshData}
          ListEmptyComponent={this._ListEmptyComponent}
          ItemSeparatorComponent={this._separator}
          data={this.state.taskList}
          keyExtractor={this._keyExtractor}
          renderItem={this._renderItem}
        />
        <Text
          style={{
            width: screenWidth,
            height: 45,
            lineHeight: 45,
            backgroundColor: "#1296db",
            color: "white",
            fontSize: 20,
            textAlign: "center"
          }}
          onPress={() => {
            this.props.navigation.navigate("SignScan", {
              nextRouter: "DispenseResult",
              qrTitle: "扫描瓶贴",
              successGoBack: this._loadTodayLineTask
            });
          }}
        >
          点击扫码配药
        </Text>
      </View>
    );
  }
}
const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: theme_app.bg_color
  }
});

function select(store) {
  return {
    user_info: store.userInfo.user_info
  };
}

export default connect(select)(Dispense);
